<template>
	<view class="root-view">
		<view class="scan-mod" v-if="isScan">
			<view class="scan-mhead">
				<view class="item-icon">
					<radar colorName="aqua" :height="160" :width="160"></radar>
				</view>
				<view class="item-lab"> 正在扫描设备 </view>
			</view>
			<view class="scan-mfoot">
				<button class="coco-btn gray xl round" @click="stopScan">取消</button>
			</view>
		</view>
		<view class="bluetooth-mod" v-else>
			<view class="bluetooth-view">
				<view class="bluetooth-cell" v-for="(item,index) of deviceList" :key="index">
					<view class="bluetooth-item" v-if="deviceMac == '' || deviceMac.toLowerCase() == item.address.toLowerCase()">
						<view class="item-head">
							<u-icon :name="$IMG_URL + '/imgs/icons/ic-bluetooth.png'" size="64"></u-icon>
						</view>
						<view class="item-body">
							<view class="item-title">{{item.name}}</view>
							<view class="item-desc">MAC:{{item.address}}</view>
						</view>
						<view class="item-foot">
							<button class="coco-btn theme round shadow sm" @click="gotoWifi(item)">去配网</button>
						</view>
					</view>
				</view>
				<u-button type="success" @click="loadDevice()">重新扫描</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	const espBluFiModule = uni.requireNativePlugin("XM-EspBlufiModule");
	import radar from '@/pages/device/components/radar.vue';
	export default {
		components:{
			radar
		},
		data() {
			return {
				deviceList:[],
				isScan:true,
				deviceMac:'',
				device_id:''
			};
		},
		onLoad(opt) {
			this.deviceMac = opt.device_id ?? '';
			this.device_id = opt.id ?? '';
			this.loadDevice()
		},
		methods:{
			loadDevice() {
				this.isScan = true;
				espBluFiModule.scanBT({
					timeOut: 4000, //仅使用于Android端，单位毫秒
					BlufiFilter: 'BLUFI' //设备名称前缀，可过滤扫描到的设备，适用于Android、iOS
				}, (ret) => {
					console.log(ret);
					ret.data.forEach((item,index) => {
						item.isConnenct = false;
					});
					this.deviceList = ret.data;
					if(ret.success && this.isScan){
						this.stopScan();
					}
					console.log(this.deviceList);
				});
			},
			stopScan(){
				espBluFiModule.stopScan((ret) => {
					//接口调用信息回调于此
					var result = JSON.stringify(ret)
					this.isScan = false;
					console.log(ret);
				});
			},
			connectDevice(item){
				espBluFiModule.connect({
					mac: item.address, //Android使用
					// uuid: '8AC95EA6-3D7C-C475-07D0-3A2C5400047D' //iOS使用
				}, (ret) => {
					//连接状态信息和接受到的信息回调于此
					// var result = JSON.stringify(ret)
					console.log(ret);
					if(ret.data.message.indexOf('Connected') !== -1){
						item.isConnenct = true;
					}
				
				});
			},
			disconnectDevice(item){
				if(!item.isConnenct){
					this.$u.toast("当前设备没有链接，不能执行次操作");
					return false;
				}
				espBluFiModule.disconnectGatt((ret) => {
					console.log(ret);
					item.isConnenct = false;
				});
			},
			gotoWifi(item){
				uni.setStorageSync('deviceMac',item.address);
				uni.redirectTo({
					url:"/pages/device/add-device-step2?device_id="+this.device_id
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: auto;
	}
	.scan-mod{
		padding:40upx 14upx;
		box-sizing: border-box;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 28upx;
		.scan-mhead{
			flex: 1;
			display: flex;
			flex-direction: column;
			.item-icon{
				// padding-top: 10vh;
			}
			.item-lab{
				margin-top: 40upx;
				text-align: center;
				color: #c0c4cc;
			}
		}
		.scan-mfoot{
			margin-top:40upx;
			padding: 0 40upx;
		}
	}
	.bluetooth-mod{
		padding:28upx;
	}
	.bluetooth-view{
		
	}
	.bluetooth-cell{
		margin-bottom: 24upx;
	}
	.bluetooth-item{
		padding: 28upx 28upx;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 16upx;
		font-size: 32upx;
		line-height: 1.2;
		.item-head{
			display: flex;
			align-items: center;
			margin-right: 24upx;
		}
		.item-body{
			flex: 1;
			min-width: 0;
		}
		.item-foot{
			margin-left: 24upx;
			text-align: right;
		}
		.item-title{
			
		}
		.item-desc{
			font-size: 26rpx;
			padding-top:10rpx;
		}
	}
</style>
